<template>
	<!-- 车辆检测 -->
	<view>
		<view class="banner">
			<image style="width: 100%;"
				src="../../static/sxbm.png" mode="widthFix">
			</image>
		</view>
		<!-- <view class="page"> -->
			<view class="content-t">
				<view class="content-t-text">
					<view class="titles">{{listData.reportName}}</view>
					<view class="titles1">¥{{listData.price}}</view>
				</view>
				<view class="zcy">
					<u-parse :html="listData.describes+listData.describesRepair"></u-parse>
				</view>
				
		</view>
		
		
		<view class="content-t">
				<view class="content-t-text">
					<view class="titles">服务内容</view>
					<view class="titles2">
						<navigator url="/pagesB/testStandard/testStandard">
						<view class="titles3">
							<image src="../../static/jcbz.png" mode=""></image>
							<view>检测标准</view>
						</view>
						</navigator>
						<navigator url="/pagesB/carTestingDetails/carTestingDetails">
							<view class="titles3">
								<image src="../../static/bgyl.png" mode=""></image>
								<view>报告样例</view>
							</view>
						</navigator>
					</view>
				</view>
				<view class="typeImg">
					<view>
						<image src="../../static/sgcldy1.png" mode="" class="imgss"></image>
						<text>事故监测</text>
					</view>
					<view>
						<image src="../../static/pscldy.png" mode="" class="imgss"></image>
						<text>泡水检测</text>
					</view>
					<view>
						<image src="../../static/hscldy.png" mode="" class="imgss"></image>
						<text>火烧检测</text>
					</view>
					<view>
						<image src="../../static/xhjc.png" mode="" class="imgss"></image>
						<text>续航检测</text>
					</view>
				</view>
				
				<view class="content-t-bottom">
					<u-parse :html="listData.serviceIntroduced"></u-parse>
				</view>
				
		</view>
		
		
		
		<view class="content-t">
				<view class="content-t-text">
					<view class="titles">保障承诺</view>
					<view class="titles2">
						<navigator url="/pagesB/compensationStandard/compensationStandard">
						<view class="titles3">
							<image src="../../static/pfbz.png" mode=""></image>
							<view>赔付标准</view>
						</view>
						</navigator>
					</view>
				</view>
				<view class="zcy">
					<u-parse :html="listData.ensureCommitment"></u-parse>
				</view>
				
		</view>
		
		<view class="content-t">
				<view class="content-t-text">
					<view class="titles">温馨提示</view>
					
				</view>
				<view class="zcy">
					<u-parse :html="listData.warmPrompt"></u-parse>
				</view>
				
				
		</view>
		<!-- </view> -->
	</view>
</template>

<script>
	import API from "@/api/index.js"
	export default {
		data() {
			return {
				detectionReportId:'',
				listData:''
			}
		},
		onLoad(option){
			this.detectionReportId = option.detectionReportId
			this.detectionReport()
		},
		methods: {
			detectionReport(){
				var data = {
					detectionReportId:this.detectionReportId
				}
				API.detectionReportDetail(data).then(res=>{
					console.log(res)
					this.listData = res.data
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content-t-bottom {
		font-size: 24rpx;
		color: #002B56;
		background: #F4F6F8;
		margin-top: 32rpx;
		padding: 12rpx;
	}
	.banner {
		height: 236rpx;
	}

	.banner image {
		height: 236rpx;
	}
	.content-t{
		padding: 32rpx;
		background: #fff;
		    margin-top: 7rpx;
	}
	.content-t-text {
		display: flex;
		justify-content: space-between;
		height: 114rpx;
		line-height: 114rpx;
		border-bottom: 1px solid #EFEFEF;
	}
	.titles {
		font-size: 36rpx;
		color: #2C2C2C;
	}
	.titles1{
		font-size: 36rpx;
		color: #FF552E;
	}
	.titles2{
		font-size: 28rpx;
		color: #2C2C2C;
		image{
			width: 25.5rpx;
			height: 25.5rpx;
			margin: 44rpx 10rpx 0 20rpx;
		}
		display: flex;
	}
	.titles3{
		display: flex;
		color: #FD7E6E;
	}
	.zcy{
		font-size: 28rpx;
		color: #4F4F4F;
		margin: 32rpx 0 ;
	}
	
	.typeImg{
		width: 100%;
		height: 177rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		view{
			width: 117rpx;
			height: 157rpx;
			// background: #000;
			.imgss{
				width: 98rpx;
				height: 98rpx;
				border-radius: 50%;
				display: block;
				margin: auto;
			}
			text{
				font-size: 24rpx;
				color: #2C2C2C;
				text-align: center;
				display: block;
				margin: auto;
				margin-top: 10rpx;
			}
		}
	}
	
</style>
